<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form
          ref="userFrom"
          :model="userFrom"
          label-width="80px"
          label-position="right"
          @submit.native.prevent
          inline
        >
          <div class="acea-row search-form" v-if="!collapse">
            <div>
              <el-form-item label="用户昵称:" label-for="userNick">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userNick" class="form_content_width" />
              </el-form-item>
              <el-form-item label="登录手机:" label-for="userPhone">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userPhone" class="form_content_width" />
              </el-form-item>

              <el-form-item label="职位描述:" label-for="desc">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.desc" class="form_content_width" />
              </el-form-item>
              <el-form-item label="商家名称:" label-for="shopName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.shopName" class="form_content_width" />
              </el-form-item>
            </div>
            <el-form-item class="search-form-sub">
              <el-button type="primary" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
          <div v-if="collapse" class="acea-row search-form">
            <div class="search-form-box">
              <el-form-item label="用户昵称:" label-for="userNick">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userNick" class="form_content_width" />
              </el-form-item>
              <el-form-item label="登录手机:" label-for="userPhone">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userPhone" class="form_content_width" />
              </el-form-item>

              <el-form-item label="职位描述:" label-for="desc">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.desc" class="form_content_width" />
              </el-form-item>
              <el-form-item label="商家名称:" label-for="shopName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.shopName" class="form_content_width" />
              </el-form-item>
              <el-form-item label="职位名称:" label-for="position">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.position" class="form_content_width" />
              </el-form-item>
              <el-form-item label="招聘类型:">
                <el-select v-model="userFrom.jobType" :popper-append-to-body="false" placeholder="请选择">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学历:">
                <el-select v-model="userFrom.educationLevel" :popper-append-to-body="false" placeholder="请选择">
                  <el-option
                    v-for="item in education_levelList"
                    :key="item.value"
                    :label="item.key"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="经验:">
                <el-select v-model="userFrom.workExperience" :popper-append-to-body="false" placeholder="请选择">
                  <el-option
                    v-for="item in work_experienceList"
                    :key="item.value"
                    :label="item.key"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="所在省:">
                <el-select v-model="userFrom.provinceIds" :popper-append-to-body="false" placeholder="请选择">
                  <el-option
                    v-for="item in province_idList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在市:">
                <el-select v-model="userFrom.cityIds" :popper-append-to-body="false" placeholder="请选择">
                  <el-option v-for="item in city_idList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属行业:">
                <el-cascader v-model="userFrom.industryIds" :options="industry_idList" :props="props1"></el-cascader>
              </el-form-item>
              <el-form-item label="薪资范围:">
                <div class="xz-box">
                  <div>
                    <el-select v-model="userFrom.minSalary" :popper-append-to-body="false" placeholder="请选择">
                      <el-option
                        v-for="item in salaryList"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="c-item">到</div>
                  <div>
                    <el-select v-model="userFrom.maxSalary" :popper-append-to-body="false" placeholder="请选择">
                      <el-option
                        v-for="item in salaryList"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="创建时间:" label-for="date_time">
                <el-date-picker
                  v-model="userFrom.dateTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>

            <el-form-item class="search-form-sub">
              <el-button type="primary" label="default" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-table
        :data="userLists"
        class="mt16"
        ref="table"
        highlight-current-row
        v-loading="loading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        @sort-change="sortChanged"
        @select="handleSelectRow"
        @select-all="handleSelectAll"
      >
        <el-table-column label="ID" width="50">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商家信息" width="200">
          <template slot-scope="scope">
            <div>用户昵称: {{ scope.row.user_nick }}</div>
            <div>登录手机: {{ scope.row.user_phone }}</div>
            <div>公司名称: {{ scope.row.company_name }}</div>
          </template>
        </el-table-column>

        <el-table-column label="所属行业" width="120">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.user_category_names" :key="index">
              <div>{{ item.name }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="所属省" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.province_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属市" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.city_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="职位名称" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.position }}</span>
          </template>
        </el-table-column>

        <el-table-column label="职位描述" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.desc }}</span>
          </template>
        </el-table-column>

        <el-table-column label="招聘类型" width="80">
          <template slot-scope="scope">
            <div>{{ scope.row.job_type == 1 ? '全职' : '兼职' }}</div>
          </template>
        </el-table-column>

        <el-table-column label="经验" width="60">
          <template slot-scope="scope">
            <div>{{ scope.row.work_experience_name }}</div>
          </template>
        </el-table-column>

        <el-table-column label="学历" width="60">
          <template slot-scope="scope">
            <div>{{ scope.row.education_level_name }}</div>
          </template>
        </el-table-column>

        <el-table-column label="薪资范围" width="100" :sortable="true">
          <template slot-scope="scope">
            <div v-if="scope.row.min_salary_name == scope.row.max_salary_name">{{ scope.row.max_salary_name }}</div>
            <div v-else class="salary-box">
              <div>{{ scope.row.min_salary_name }}</div>
              <div class="s-c">到</div>
              <div>
                {{ scope.row.max_salary_name }}
              </div>
            </div>
          </template>
        </el-table-column>
       
        <el-table-column label="关键词" width="100" :sortable="true">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.keywords" :key="index">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="状态" width="100" >
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">{{ '审核中' }}</div>
            <div v-if="scope.row.status == 1">{{ '开放中' }}</div>
            <div v-if="scope.row.status == 2">{{ '待开放' }}</div>
            <div v-if="scope.row.status == 4">{{ '审核失败' }}</div>
          </template>
        </el-table-column>
        
        <el-table-column label="创建时间" width="150" :sortable="true">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time }}</div>
          </template>
        </el-table-column> 
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <template>
              <a @click="userDetail(scope.row)" v-if="scope.row.status == 0">审核</a>
              <a @click="userDetail(scope.row)" v-if="scope.row.status == 1 || scope.row.status == 2">重新驳回</a>

              <el-divider direction="vertical"></el-divider>
              <a @click="userDetail(scope.row)">详情</a>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="userFrom.page"
          :limit.sync="userFrom.limit"
          @pagination="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getShopAuth, getProvinceFn, getJobOptionsList, getJobPositions, getJobPosList } from '@/api/all';
export default {
  name: '',
  components: {},
  data() {
    let self = this;
    return {
      userFrom: {
        userNick: '',
        userPhone: '',
        desc: '',
        shopName: '',
        position: '',
        dateTime: '',
        user_type: '',
        jobType: '',
        page: 1,
        limit: 10,
        educationLevel: '',
        workExperience: '',
        provinceIds: '',
        cityIds: '',
        industryIds: '',
        minSalary: '',
        maxSalary: '',
      },
      options2: [
        {
          value: '1',
          label: '全职',
        },
        {
          value: '2',
          label: '兼职',
        },
      ],
      collapse: false,
      selectLabelShow: false,
      selectDataLabel: [],
      address: '',
      education_levelList: [],
      userLists: [],
      total: 0,
      salaryList: [],
      salary_rangeList: [],
      work_experienceList: [],
      province_idList: [],
      city_idList: [],
      industry_idList: [],
      props1: {
        value: 'id',
        label: 'name',
        children: 'children',
      },
    };
  },
  watch: {},
  computed: {},
  async created() {
    const res = await getJobPosList({
      auth_type: 1,
      page: 1,
      size: 10,
      industry_id: 0,
      status: -1,
    });

    this.userLists = res.data.data;
    this.total = res.data.total;
  },
  mounted() {
    getJobOptionsList({
      code: ['EDUCATION_LEVEL', 'WORK_EXPERIENCE', 'SALARY_RANGE', 'SALARY'],
    }).then((res) => {
      this.education_levelList = res.data.education_level;
      this.salaryList = res.data.salary;
      this.salary_rangeList = res.data.salary_range;
      this.work_experienceList = res.data.work_experience;
    });

    getJobPositions({
      field: 'province_id',
    }).then((res) => {
      this.province_idList = res.data;
    });

    getJobPositions({
      field: 'city_id',
    }).then((res) => {
      this.city_idList = res.data;
    });

    getJobPositions({
      field: 'industry_id',
    }).then((res) => {
      this.industry_idList = res.data;
    });
  },
  methods: {
    openSelectLabel() {
      this.selectLabelShow = true;
    },

    async provinceFn(pid) {
      const res = await getProvinceFn({ pid: pid });
      return res.data;
    },

    //地址选择
    handleChange(label) {
      this.address = label;
      console.log(this.address);
    },

    userSearchs() {
      console.log(this.userFrom);
    },
    reset() {
      this.userFrom = {
        userName: '',
        userEmail: '',
        userPhone: '',
        dateTime: '',
        nickName: '',
      };
    },
    pageChange() {},
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}

.salary-box {
  display: flex;
  align-items: center;

  .s-c {
    padding: 0 10px;
  }
}

.xz-box {
  display: flex;
  align-items: center;

  .c-item {
    padding: 0 10px;
  }
}
.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 24px;
    font-weight: 500;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  ::v-deep .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: var(--prev-color-primary);
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox2_img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
.tabBox_img-box {
  display: flex;
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  ::v-deep .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  ::v-deep .ivu-divider-horizontal {
    margin: 0 !important;
  }
}

.labelInput {
  width: 250px;
  border: 1px solid #dcdee2;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;
  .span {
    color: #c5c8ce;
  }

  .ivu-icon-ios-arrow-down {
    font-size: 14px;
    color: #808695;
  }
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.search-form {
  display: flex;
  justify-content: space-between;
  .search-form-box {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
}
.search-form-sub {
  display: flex;
}

.el-card,
.el-message {
  overflow: visible !important;
}
</style>

